<template>
    <view>
        <view class="item">
            <view>路线名称</view>
            <view><input type="text" placeholder="请输入路线名称" v-model="linename"></view>
        </view>

        <view class="item">
            <view>运费</view>
            <view><input type="number" placeholder="请输入运费" v-model="money"></view>
        </view>
        <view class="item">
            <view>里程</view>
            <view><input type="number" placeholder="请输入里程" v-model="length"></view>
        </view>
        <view class="item">
            <view>备注</view>
            <view><input type="text" placeholder="请输入备注" v-model="content"></view>
        </view>
        <view class="items">
            <view>计数模式</view>
            <view @click="show = true">{{ state == '' ? '请选择计数模式' : state == 1 ? '普通当次' : '装卸车模式' }}</view>
        </view>
        <view class="items" v-if="state == 2">
            <view>装货设备</view>
            <view @click="show1 = true">{{ loading_facility == '' ? '请选择装货设备' : loading_facility_name }}</view>
        </view>
        <view class="items" v-if="state == 2">
            <view>卸货设备</view>
            <view @click="show2 = true">{{ unload_facility == '' ? '请选择卸货设备' : unload_facility_name }}</view>
        </view>
        <view class="items" v-if="state == 1">
            <view>单次设备</view>
            <view @click="show3 = true">{{ one_facility == '' ? '请选择设备' : one_facility_name }}</view>
        </view>
        <view class="submit" @click="submit">确认</view>
        <u-picker :show="show" :columns="columns" keyName="name" @confirm="confirmType"
            @cancel="show = false"></u-picker>
        <u-picker :show="show1" :columns="facilityListArr" keyName="name" @confirm="confirmType1"
            @cancel="show1 = false"></u-picker>
        <u-picker :show="show2" :columns="facilityListArr" keyName="name" @confirm="confirmType2"
            @cancel="show2 = false"></u-picker>
        <u-picker :show="show3" :columns="facilityListArr" keyName="name" @confirm="confirmType3"
            @cancel="show3 = false"></u-picker>
    </view>
</template>

<script>
import { shoplineadd, facilityList } from "@/api/user.js"
export default {
    components: {},
    props: {},
    data() {
        return {
            linename: '',
            money: '',
            length: '',
            content: '',
            status: 1,
            id: '',
            stateName: '请选择计数模式',
            state: '',
            show: false,
            show1: false,
            show2: false,
            show3: false,
            columns: [
                [{
                    name: '普通单次',
                    id: 1,
                }, {
                    name: '装卸车模式',
                    id: 2,
                }]
            ],
            loading_facility: '',
            unload_facility: '',
            one_facility: '',
            loading_facility_name: '',
            unload_facility_name: '',
            one_facility_name: '',
            facilityListArr: [
                []
            ]
        };
    },
    watch: {},
    methods: {

        submit() {
            if (this.linename == '') {
                uni.showToast({
                    title: '请输入路线名称',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.money == '') {
                uni.showToast({
                    title: '请输入运费',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.length == '') {
                uni.showToast({
                    title: '请输入里程',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.state == '') {
                uni.showToast({
                    title: '请选择计数模式',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            shoplineadd({
                linename: this.linename,
                money: this.money,
                length: this.length,
                content: this.content,
                status: this.status,
                id: this.id,
                state: this.state,
                loading_facility: this.loading_facility,
                unload_facility: this.unload_facility,
                one_facility: this.one_facility
            }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    uni.showToast({
                        title: '添加成功～',
                        icon: 'none',
                        mask: true
                    })
                    uni.navigateBack({
                        delta: 1
                    })
                }
            })
        },
        confirmType(e) {
            console.log(e)
            this.stateName = e.value[0].name
            this.state = e.value[0].id
            this.show = false;
        },
        confirmType1(e) {
            console.log(e)
            this.loading_facility_name = e.value[0].name
            this.loading_facility = e.value[0].id
            this.show1 = false;
        },
        confirmType2(e) {
            console.log(e)
            this.unload_facility_name = e.value[0].name
            this.unload_facility = e.value[0].id
            this.show2 = false;
        },
        confirmType3(e) {
            console.log(e)
            this.one_facility_name = e.value[0].name
            this.one_facility = e.value[0].id
            this.show3 = false;
        },
        facilityListFun() {
            facilityList({
                page: 1,
                pageSize: 1000,
            }).then(res => {
                console.log(res)
                let arr = []
                for (let i = 0; i < res.data.length; i++) {
                    console.log(res.data[i])
                    this.facilityListArr[0].push({
                        name: res.data[i].facility_name,
                        id: res.data[i].id
                    })
                }
                console.log(this.facilityListArr)
                //
            })
        }
    },
    onShow() { },
    onLoad(option) {
        console.log(option)
        this.facilityListFun()
        if (option.type == 'edit') {
            uni.setNavigationBarTitle({
                title: '编辑路线'
            });

            this.linename = option.lineName;
            this.money = option.money;
            this.length = option.length;
            this.content = option.content;
            this.status = option.status
            this.id = option.lineId
            this.unload_facility_name = option.unload_facility_name
            this.one_facility_name = option.one_facility_name
            this.loading_facility_name = option.loading_facility_name
            this.state = option.state
            this.unload_facility = option.unload_facility
            this.one_facility = option.one_facility
            this.loading_facility = option.loading_facility
        }
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.item {
    width: 94%;
    height: 90rpx;
    border-bottom: 1px solid #efefef;
    margin: auto;
    display: flex;
    line-height: 90rpx;

    view:nth-child(1) {
        width: 30%;
        font-size: 28rpx;
        font-weight: 600;
    }

    view:nth-child(2) {
        width: 70%;

        input {
            font-size: 28rpx;
            width: 100%;
            height: 100%;
            text-align: right;
        }

    }
}

.items {
    width: 94%;
    height: 90rpx;
    border-bottom: 1px solid #efefef;
    margin: auto;
    display: flex;
    line-height: 90rpx;

    view:nth-child(1) {
        width: 30%;
        font-size: 28rpx;
        font-weight: 600;
    }

    view:nth-child(2) {
        width: 70%;
        text-align: right;
        font-size: 28rpx;
        color: $uni-color-primary;
    }
}

.submit {
    width: 94%;
    height: 90rpx;
    background-color: $uni-color-primary;
    border-radius: 50rpx;
    margin: auto;
    margin-top: 130rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
}
</style>